<!DOCTYPE html>
<html>

<head>
    <!-- MISC/META -->
    <title>SiplPen
    </title>
    <link rel="icon" type="image/svg+xml" href="feather.svg" sizes="any" />
    <!-- ~ Minimal Distraction, Maximum Zen-->
    <meta charset="utf-8" />
    <meta name="description"
        content="SiplPenPlus - A minimal text editor, made to stay out of the way while you get the words down." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2" />
    <!-- CSS -->
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link href="css/style.css" rel="stylesheet" />
    <link rel="preload" href="fonts/fontawesome-webfont.woff2?v=4.7.0" as="font">
</head>

<body class="yang">
    <div class="overlay">
        <div class="wordcount modal">
            <h1>Target Word Count
                <!--{cn}目标字数-->
            </h1>
            <p>Set a amount of the words you want to write. This will be used to show a progress bar on the top.
                <!--{cn}设定您的目标字数。这将在顶部绘制一个进度条-->
            </p>
            <div>
                <input type="number" name="quantity" value="0" min="0" />
            </div>
            <div style="font-size: 11px;text-align: center;">Enter zero to disable.
                <!--{cn}输入0以关闭此功能。-->
            </div>
        </div>
        <div class="saveoverlay modal">
            <h1>Select save format
                <!--{cn}选择保存格式-->
            </h1>
            <p class="finishsummary" style="display:none">Well Done!
                <!--{cn}心流模式已经结束--><br />You finished your job in {s} minutes!
                <!--{cn}您在{s}分钟内完成了您的任务--><br />Now you can download or copy your writings.
                <!--{cn}您现在可以下载或保存您的文本-->
            </p>
            <p class="saveselection selection">
                <span data-format="markdown">Markdown</span>
                <span data-format="html">HTML</span>
                <span data-format="plain">Plain Text
                    <!--{cn}纯文本--></span>
            </p>
            <button class="savebutton useicons"><i class="fa fa-download" aria-hidden="true"></i></button>
            <div>
                Or select format and press ctrl+c (cmd+c on mac) to copy the text.
                <!--{cn}您也可以选择格式并按下Ctrl+C(在Mac上是Cmd+C)来复制文本-->
            </div>
            <textarea class="hiddentextbox"></textarea>
        </div>

        <div class="flowsettings modal">
            <h1>Flowstate Mode
                <!--{cn}心流模式-->
            </h1>
            <div>
                This is the most dangerous function of this appliction. You have to keep writing, or everything will be
                erased if you stop beyond the expiring time.
                <!--{cn}这是这个应用最危险的功能：在你设定的时间段内，如果你停止输入文字超过设定的间隔时间，之前写下的所有内容都会消失。-->
            </div>
            <div>Now set the duration time you want to focus and the exciting expiring time.
                <!--{cn}现在请设定持续时间段和间隔时间。-->
            </div>
            <div>
                <span>Lasts for (minutes):
                    <!--{cn}持续时间（分钟）：--></span>
                <input type="number" name="total_time" value="10" min="0" />
            </div>
            <div>
                <span>Expire in (seconds):
                    <!--{cn}间隔时间（秒）：--></span>
                <input type="number" name="expiring_time" value="6" min="0" />
            </div>
            <p class="selection startflow">
                <span>Start
                    <!--{cn}开始--></span>
            </p>
        </div>
        <div class="flowfailure modal" style="z-index: 128;">
            <table>
                <tr>
                    <td><i class="fa fa-fw fa-exclamation-circle fa-2x" aria-hidden="true"></i></td>
                    <td style="width: 4px;"></td>
                    <td>
                        <p>Time's up :(
                            <!--{cn}时间到:(--><br /> Be more focus next time.
                            <!--{cn}下次请更加专心。-->
                        </p>
                    </td>
                </tr>
            </table>
        </div>
        <div class="flowing modal">
            <table>
                <tr>
                    <td><i class="fa fa-fw fa-exclamation-circle fa-2x" aria-hidden="true"></i></td>
                    <td style="width: 4px;"></td>
                    <td>
                        <p>You're already in flowstate mode.
                            <!--{cn}心流模式已经启动。--><br /> Just keep calm and carry on.
                            <!--{cn}请继续您的写作。-->
                        </p>
                    </td>
                </tr>
            </table>
        </div>
        <div class="settings modal">
            <!--Settings-->
            <h1>Settings
                <!--{cn}设置-->
            </h1>
            <div>
                <div>
                    <h2>Editor
                        <!--{cn}编辑器-->
                    </h2>
                    <table>
                        <tr>
                            <td>Use source serif font by Adobe.
                                <!--{cn}使用Adobe开发的思源宋体--><br />
                                <span style="font-size:smaller">Improve visual experience. Use this when you feel font
                                    ugly.
                                    <!--{cn}改善视觉体验，在你觉得字体太丑或者不协调时使用--></span><br>
                                <b id="spanfontloading">Font file is loading.
                                    You can continue using this app. When loading complete, the yellow top bar will
                                    disappear.
                                    <!--{cn}正在加载字体。您可以继续使用程序而不受影响。当加载完成时，黄色顶栏会消失。--></b>
                                <b id="spanfontfailed">Unable to load font file. Please refresh this page and retry.
                                    <!--{cn}字体加载失败，这通常是网络不畅导致的，请刷新页面后重试。--></b>
                            </td>
                            <td class="link_btn" id="toggleFont" onclick="SiplPen.ui.s_toggleFont()"><span
                                    class="fa-lg"><i class="fa-fw fa fa-square-o" aria-hidden="true"></i></span></td>
                        </tr>
                        <tr>
                            <td>Spell Check
                                <!--{cn}拼写检查--><br />
                                <span style="font-size:smaller">Disable this to prevent distraction.
                                    <!--{cn}关闭此选项以避免干扰--></span>
                            </td>
                            <td class="link_btn" id="toggleSpellCheck" onclick="SiplPen.ui.s_toggleSpellCheck()"><span
                                    class="fa-lg"><i class="fa-fw fa fa-square-o" aria-hidden="true"></i></span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div>
                    <h2>Flowstate
                        <!--{cn}心流模式-->
                    </h2>
                    <table>
                        <tr>
                            <td>Strict mode
                                <!--{cn}严格模式--><br />
                                <span style="font-size:smaller">Disable auto save and copy in flowstate mode.
                                    <!--{cn}在心流模式下关闭自动保存、右键菜单与复制功能--></span>
                            </td>
                            <td class="link_btn" id="toggleStrict" onclick="SiplPen.ui.s_toggleStrict()"><span
                                    class="fa-lg"><i class="fa-fw fa fa-square-o" aria-hidden="true"></i></span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div>
                    <h2>Misc
                        <!--{cn}杂项设置-->
                    </h2>
                    <table>
                        <tr>
                            <td>Clean ALL user data.
                                <!--{cn}清除所有用户数据--><br />
                                <span style="font-size:smaller" onclick="">Reset HTML5 "localStorage"
                                    <!--{cn}重置HTML5"localStorage"存储区--></span></td>
                            <td class="link_btn" onclick="SiplPen.ui.s_cleanLocalStorage()"><span class="fa-lg"><i
                                        class="fa fa-caret-square-o-right" aria-hidden="true"></i></span></td>
                        </tr>
                    </table>
                </div>
                <div>
                    <h2>Language
                        <!--{cn}语言设置-->
                    </h2>
                    <table id="lang_list">
                        <tr>
                            <td><span onclick="SiplPen.translater.setLang('default')">English</span></td>
                            <td style="text-align: right;"><span
                                    onclick="SiplPen.translater.setLang('cn')">Chinese(中文)</span></td>
                        </tr>

                    </table>
                    <div id="langarginform" style="font-size:12px;display: none;">
                        <p>If your address field or bookmark link have argument like "?lang=XX",
                            maybe your language change will lost after exit or refresh this page. You can delete the
                            argument safely, if you want make this setting permanent.
                            <!--{cn}如果你的地址栏或者书签链接含有“?lang=XX”之类的参数，你的语言设置会在离开或刷新此页面后失效。这个参数是开发初期用来无视浏览器语言配置，强制应用使用翻译文本的。如果你想要长期保存这项更改，你可以放心地从链接中删除这些参数。-->
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="info modal">
            <h1>Info
                <!--{cn}信息-->
            </h1>
            <div>
                <h2>Statistics
                    <!--{cn}统计-->
                </h2>
                <table>
                    <tr>
                        <td>Word count
                            <!--{cn}字数-->
                        </td>
                        <td class="item_value" id="wordcountinfo">123</td>
                    </tr>
                </table>
            </div>
            <div>
                <h2>About
                    <!--{cn}关于-->
                </h2>
                <table>
                    <tr>
                        <td>Author
                            <!--{cn}作者-->
                        </td>
                        <td class="item_value">ImBearChild(BearChild)</td>
                    </tr>
                    <tr>
                        <td>License
                            <!--{cn}许可-->
                        </td>
                        <td class="item_value">MIT</td>

                    </tr>
                    <tr>
                        <td>Link
                            <!--{cn}链接-->
                        </td>
                        <td class="item_value"><a href="https://github.com/ImBearChild/SiplPen" target="_blank"
                                rel="noopener noreferrer">GitHub</a>&<a href="https://gitee.com/bearchild/SiplPen"
                                target="_blank" rel="noopener noreferrer">Gitee</a></td>
                    </tr>
                </table>
            </div>
        </div>

    </div>

    <div class="text-options">
        <div class="options">
            <span class="no-overflow">
                <span class="lengthen ui-inputs">
                    <button class="url"><i class="fa fa-link " aria-hidden="true"></i></button>
                    <input class="url-input" type="text" placeholder="Type or Paste URL here"
                        data-placeholder-cn="在此处输入或粘贴URL" />
                    <button class="bold"><i class="fa fa-bold" aria-hidden="true"></i></button>
                    <button class="italic"><i class="fa fa-italic" aria-hidden="true"></i></button>
                    <button class="quote"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
                </span>
            </span>
        </div>
    </div>

    <div class="ui">
        <div class="wrapper">
            <div class="top editing">
                <button class="fullscreen useicons" title="Toggle fullscreen" data-title-cn="全屏模式">
                    <i class="fa fa-arrows-alt " aria-hidden="true"></i>
                </button>
                <button class="save useicons" title="Save Text" data-title-cn="保存文本">
                    <i class="fa fa-floppy-o " aria-hidden="true"></i>
                </button>
                <button class="color-flip useicons" title="Invert colors" data-title-cn="切换配色">
                    <i class="fa fa-adjust " aria-hidden="true"></i>
                </button>
                <button class="target useicons" title="Set target word count" data-title-cn="设置目标">
                    <i class="fa fa-dot-circle-o " aria-hidden="true"></i>
                </button>
                <button class="flowstate useicons" title="Enter flowstate mode" data-title-cn="心流模式">
                    <i class="fa fa-angle-double-right fa-fw" aria-hidden="true"></i>
                </button>
            </div>

            <div class="bottom">
                <button class="infobtn useicons" title="About" data-title-cn="关于信息">
                    <i class="fa fa-info" aria-hidden="true"></i></button>
                <button class="settingbtn useicons" title="Settings" data-title-cn="偏好设置">
                    <i class="fa fa-cog" aria-hidden="true"></i></button>
            </div>
        </div>
    </div>

    <div class="counter-bar">
        <span class="word-progress progress"></span>
        <span class="time-progress progress"></span>
        <span class="font-progress progress"></span>
    </div>

    <section>
        <header contenteditable="true" class="header" spellcheck="false"></header>
        <article contenteditable="true" class="content"></article>
    </section>

    <!-- LIBS -->
    <script src="js/libs/FileSaver.min.js"></script>
    <script src="js/libs/Blob.min.js"></script>
    <script src="js/libs/screenfull.min.js"></script>
    <script src="js/libs/fontfaceobserver.standalone.min.js"></script>

    <!-- JS -->
    <script>
        var SiplPen = window.SiplPen || {};
    </script>
    <script src="js/translater-lib.js"></script>
    <script src="js/translater.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/editor.js"></script>
    <script src="js/ui.js"></script>
    <script>
        // Initiate SiplPen
        SiplPen.translater.init();
        SiplPen.editor.init();
        SiplPen.ui.init();
    </script>
</body>

</html>